<template>
  <div @click="click">
    <el-icon>
      <FullScreen v-if="!isFullscreen" />
      <Aim v-else />
    </el-icon>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'

const isFullscreen = ref(false)

const click = () => {
  if (!document.fullscreenEnabled) {
    ElMessage({
      message: '你的浏览器不支持全屏',
      type: 'warning'
    })
    return false
  }
  
  if (!isFullscreen.value) {
    requestFullscreen()
  } else {
    exitFullscreen()
  }
}

const requestFullscreen = () => {
  const element = document.documentElement
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}

const change = () => {
  isFullscreen.value = document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
}

onMounted(() => {
  document.addEventListener('fullscreenchange', change)
  document.addEventListener('mozfullscreenchange', change)
  document.addEventListener('webkitfullscreenchange', change)
  document.addEventListener('msfullscreenchange', change)
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', change)
  document.removeEventListener('mozfullscreenchange', change)
  document.removeEventListener('webkitfullscreenchange', change)
  document.removeEventListener('msfullscreenchange', change)
})
</script>
